<!--此页仅有管理员主页代码，学生和辅导员类似-->

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>计算机科学与工程学院——研究生奖学金系统</title>  
<link rel="stylesheet" href="管理员主页.css">  
</head>  
<body>  
<style>
  body {  
    margin: 0;  
    padding: 0;  
    font-family: Arial, sans-serif;  
  }  
    
  header {  
    background-color: #f8f9fa; /* 浅灰色背景 */  
    padding: 10px;  
    text-align: right; /* 文本右对齐 */  
  }  
    
  .logout-container {  
    margin-right: 10px; /* 距离右侧一些空间 */  
  }  

  .logout-link {  
    text-decoration: none;  
    color: #333;  
    font-weight: bold;  
  }  
    
  .container {  
    display: flex;  
    width: 100vw; /* 宽度等于视口宽度 */  
    height: 100vh; /* 高度等于视口高度 */  
    box-sizing: border-box; /* 包括padding和border在内 */ 
  }  
    
  .sidebar {  
    width: 20%; /* 侧边栏宽度 */  
    background-color: #333; /* 侧边栏背景色 */  
    color: #fff; /* 侧边栏文本颜色 */  
    padding: 20px;  
  }  
    
  .sidebar ul {  
    list-style: none;  
    padding: 0;  
    margin: 0;  
  }  
    
  .sidebar ul li a {  
    display: block;  
    padding: 10px 0;  
    text-decoration: none;  
    color: #fff;  
  }  
    
  .sidebar ul li a:hover {  
    background-color: #555; /* 鼠标悬停时背景色 */  
  }  
    
  .content {  
    width: 80%; /* 主要内容区域宽度 */  
    padding: 20px; 
    background-color: rgba(0, 255, 255, 0.237);
  }

  h1{
    text-align: center;
  }
<style/>

<header>  
    <!-- 右上角退出登录按钮 -->  
     <div class="logout-container">  
         <a href="http://127.0.0.1:3000/系统首页.html" class="logout-link">退出登录</a>  
     </div>  
</header> 

<div class="container">    
  <nav class="sidebar">  
    <ul>  
      <li><a href="#">公告信息</a></li>  
      <li><a href="#">个人主页</a></li>  
      <li><a href="#">学生管理</a></li>
      <li><a href="#">学生成绩管理</a></li>  
      <li><a href="#">学生奖惩信息</a></li>  
      <li><a href="#">辅导员管理</a></li>  
      <li><a href="#">教师管理</a></li>  
      <li><a href="#">奖学金类型</a></li>
      <li><a href="#">奖学金申请管理</a></li>    
    </ul>  
  </nav>  
  
  <!-- 主要内容区域 -->  
  <main class="content">  
    <h1>欢迎进入奖学金管理系统</h1>  
    <p>这里是页面的主要内容。</p>  
  </main>  
</div>  
  
</body>  
</html>
